<template>
  <div class="wrap">
    <nav-bar :title="cateTitle">
      <img src="/img/47.png" slot="screen" class="nav-right" />
    </nav-bar>
    <div class="page">
      <side-menu :sideMenuList="sideMenuList"></side-menu>
      <tabs :tabsList="tabsList" class="tabs">
        <product-item-long slot="tabItem" :product="product"></product-item-long>
      </tabs>
    </div>
  </div>
</template>

<script>
import navBar from "@/components/nav-bar";
import sideMenu from "@/components/side-menu";
import tabs from "@/components/tabs";
import productItemLong from "@/components/product-item-long";
export default {
  name: "cate",
  data() {
    return {
      cateTitle: "肉类禽蛋",
      sideMenuList: [
        { title: "生鲜类" },
        { title: "有机蔬菜" },
        { title: "叶菜类" },
        { title: "瓜果类" },
        { title: "茄果类" },
        { title: "食用菌菇" }
      ],
      tabsList: [
        { title: "促销" },
        { title: "折扣" },
        { title: "果蔬类" },
        { title: "瓜果类" },
        { title: "叶菜类" }
      ],
      product: {
        desc: "描述信息",
        title: "商品标题",
        price: 20,
        img: "/img/30.png",
        tagsInfo: "2件8折"
      }
    };
  },
  components: {
    navBar,
    sideMenu,
    tabs,
    productItemLong
  }
};
</script>
<style lang="less">
.wrap {
  height: 100%;
  width: 100%;
}
.nav-right {
  height: 20px;
  width: 20px;
}
.page {
  display: flex;
  width: 100%;
  height: 100%;
  padding-top: 50px;
  box-sizing: border-box;
  .tabs {
    width: 100%;
    height: 45px;
    background-color: #fff;
    .van-tabs__line {
      background-color: #fff;
    }

    .van-tab {
      font-size: 13px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(48, 48, 48, 1);
      &.van-tab--active {
        font-size: 13px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(0, 124, 157, 1);
      }
    }
  }
}
</style>


